/**
 * setState是同步还是异步的
 * 
 *    React 18
 *      全是异步的
 * 
 *    React 18 之前
 *      在组件生命周期或React合成事件中，setState是异步
        在setTimeout或者原生dom事件中，setState是同步
 */

import React from "react";

class App extends React.Component {
  state = {
    num: 1,
  };

  add() {
    // React 18 之前,setTimeout 中的 this.setState 是同步的
    setTimeout(() => {
      this.setState({ num: 2 });
      console.log(this.state.num);
      this.setState({ num: 3 });
      console.log(this.state.num);
    });
  }

  componentDidMount() {
    /**
     * 组件挂载完成,类似 Vue 中 mounted
     */
    document.querySelector("#btn")?.addEventListener("click", () => {
      // React 18 之前, 原生事件中的 this.setState 是同步的
      this.setState({ num: 2 });
      console.log(this.state.num);
      this.setState({ num: 3 });
      console.log(this.state.num);
    });
  }

  render() {
    return (
      <div>
        <p>num: {this.state.num}</p>
        <button onClick={() => this.add()}> ADD </button>
        <button id="btn">原生绑定事件</button>
      </div>
    );
  }
}

export default App;
